<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-22 13:13:43
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-10-30 09:04:48
 * @FilePath: \app-formwork\src\pages\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="login">
    <view class="login_content">
      <!-- 返回 -->
      <view class="back" @click="goHome()">
        <view class="statusbar"></view>
        <view class="backicon flex items">
          <image src="../../assets/images/back.png" alt="" />
        </view>
      </view>
      <!-- logo -->
      <view class="login_logo flex items justify-center">
        <image src="../../assets/images/logo.png" alt="" />
      </view>
      <!-- 登录/注册 -->
      <view class="login_type flex items justify-center">
        <view class="denglu" :class="isShow == 1 ? 'ondenglu' : 'denglu'" @click="logonBtn">Log in</view>
        <view class="line"></view>
        <view class="zhuce" :class="isShow == 2 ? 'onzhuce' : 'zhuce'" @click="registerBtn">Sign in</view>
      </view>
      <!-- form表单 -->
      <!-- 登录 -->
      <view class="login_from" v-if="isShow == 1">
        <up-input
          class="input_css"
          placeholder="Email"
          color="rgba(0, 0, 0, 0.38)"
          border="surround"
          v-model="loginInfo.email"
        ></up-input>
        <view class="hasicon flex items">
          <up-input
            class="input_css"
            :class="errShow == 2 ? 'onInput_css' : 'input_css'"
            placeholder="Password"
            :color="bgColor"
            ref="bgcColor"
            :type="passwordType ? 'password' : 'text'"
            border="surround"
            v-model="loginInfo.password"
            
          ></up-input>
          <u-icon class="u_icon" name="eye" color="#2979ff" size="28" @click="loginEye"></u-icon>
        </view>
        <!-- <view class="forget_password">忘记密码?</view> -->
        <up-button class="input_dl" type="primary" shape="circle" text="" @click="login">Log in</up-button>
      </view>
      <!-- 注册 -->
      <view class="login_from" v-if="isShow == 2">
        <up-input
          class="input_css"
          placeholder="Please enter the account number: Email"
          color="rgba(0,0,0,0.38)"
          type="text"
          border="surround"
          v-model="registerInfo.email"
        ></up-input>
        <view class="hasicon flex items">
          <up-input
            class="input_css"
            :class="errShow2 == 2 ? 'onInput_css' : 'input_css'"
            placeholder="The password consists of 6-12 letters or numbers"
            :color="rebgColor"
            :type="repasswordType ? 'password' : 'text'"
            border="surround"
            v-model="registerInfo.password"
          ></up-input>
          <u-icon class="u_icon" name="eye" color="#2979ff" size="28" @click="openEye"></u-icon>
        </view>
        <view class="hasicon flex items">
          <up-input
            class="input_css"
            :class="errShow2 == 2 ? 'onInput_css' : 'input_css'"
            placeholder="Enter the new password again"
            :color="rebgColor"
            :type="repasswordTypere ? 'password' : 'text'"
            border="surround"
            v-model="registerInfo.passwordcheck"
          ></up-input>
          <u-icon class="u_icon" name="eye" color="#2979ff" size="28" @click="openEyere"></u-icon>
        </view>

        <!-- <view class="forget_password">忘记密码?</view> -->
        <!-- <up-input class="input_dl" placeholder="请输入密码" border="surround" v-model="login.password">登录</up-input> -->
        <up-button class="input_dl" type="primary" shape="circle" text="" @click="register">Sign in</up-button>
      </view>
      <!-- 协议 隐私 -->
      <view class="agrement flex items justify-center">
        <view class="xie" @click="onAgreement(1)">《User agreement》</view>
        <view class="line"></view>
        <view class="yinsi" @click="onAgreement(2)">《Privacy agreement》</view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 登录接口
import { loginApi } from "@/api/login";
const title = ref("44433ssss");

//切换登录注册下标显示
const isShow = ref(1);
//登录按钮
const logonBtn = () => {
  isShow.value = 1;
};
//注册按钮
const registerBtn = () => {
  isShow.value = 2;
};

const loginInfo = ref({
  email: "",
  password: ""
});

const registerInfo = ref({
  email: "",
  password: "",
  passwordcheck: ""
});
//登录

let res = ref(201);

//返回
const goHome = () => {
  uni.switchTab({ url: "/pages/tabbar/home" });
};
//控制背景框颜色
// let bgColor=ref(null)
const bgColor = ref("#303133");
const passwordType = ref(true);
const errShow = ref(1);
const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; //邮箱格式验证
const login = () => {
  if (loginInfo.value.email == "") return uni.showToast({ title: "Email is empty, please enter email", icon: "none" });

  if (loginInfo.value.password == "")
    return uni.showToast({ title: "Password is empty, please enter password", icon: "none" });
  if (!mailReg.test(loginInfo.value.email))
    return uni.showToast({ title: "The email format is incorrect, please re-enter", icon: "none" });
  loginApi
    .login(loginInfo.value)
    .then((res) => {
      console.log("res", res);
      if (res.code == 1) {
        let token = res.data.userinfo.token;
        let uuid = res.data.userinfo.id;

        console.log("userinfoData", token);
        console.log("11110", 11111);

        //将注册信息保存起来
        uni.setStorageSync("token", token);
        uni.setStorageSync("uuid", uuid);

        uni.setStorageSync("isLogin", 1); //用于登录拦截判断
        // //数据
        uni.showToast({ title: res.msg, icon: "none", duration: 1000 });
        //去首页
        uni.switchTab({ url: "/pages/tabbar/home" });
      }
      if (res.code == 0) {
        uni.showToast({ title: res.msg, icon: "none", duration: 1000 });
        // bgColor.value = "#ff0000";
        // loginInfo.value.password = res.msg;
        passwordType.value = false;
        // errShow.value = 2;
      }
    })
    .catch((err) => {
      console.log("err", err);
      loginInfo.value.password = "Password error";
      passwordType.value = false;
      bgColor.value = "#ff0000";
      errShow.value = 2;
      uni.showToast({ title: "Account is locked", icon: "none", duration: 1000 });
    });
};
//注册
const errShow2 = ref(1);
const rebgColor = ref("#303133");
const resRegister = ref(200);
const repasswordType = ref(true);
const repasswordTypere = ref(true);
const register = () => {
  if (registerInfo.value.email == "")
    return uni.showToast({ title: "Email is empty, please enter email", icon: "none" });
  if (!mailReg.test(registerInfo.value.email))
    return uni.showToast({ title: "The email format is incorrect, please re-enter", icon: "none" });
  if (registerInfo.value.password == "")
    return uni.showToast({ title: "Password is empty, please enter password", icon: "none" });
  if (registerInfo.value.passwordcheck == "")
    return uni.showToast({ title: "Password is empty, please enter password", icon: "none" });

  if (registerInfo.value.password != registerInfo.value.passwordcheck) {
    console.log("111", 1111);
    errShow2.value = 2;
    (rebgColor.value = "#ff0000"), (registerInfo.value.password = "The two password entries are inconsistent");
    registerInfo.value.passwordcheck = "The two password entries are inconsistent";
    repasswordType.value = false;
    repasswordTypere.value = false;
    return;
  }
  loginApi
    .register(registerInfo.value)
    .then((res) => {
      console.log("注册", res.code);
      if (res.code == 1) {
        uni.showToast({ title: res.msg, icon: "none", duration: 1000 });
        uni.navigateTo({
          url: "/pages/login/index"
        });
      }
      if (res.code == 0) {
        uni.showToast({ title: res.msg, icon: "none" });
        // rebgColor.value = "#ff0000";
        registerInfo.value.password = "The two password entries are inconsistent";
        registerInfo.value.passwordcheck = "The two password entries are inconsistent";
        repasswordType.value = false;
        repasswordTypere.value = false;
        // errShow2.value = 2;
      }
    })
    .catch((err) => {
      uni.showToast({ title: err.msg, icon: "none", duration: 1000 });
      // uni.showToast({ title: "The password length should be between 6-12 digits", icon: "none" });
      rebgColor.value = "#ff0000";
      registerInfo.value.password = "The two password entries are inconsistent";
      registerInfo.value.passwordcheck = "The two password entries are inconsistent";
      repasswordType.value = false;
      repasswordTypere.value = false;

      errShow2.value = 2;
    });
  // if(resRegister.value==200){
  //   bgColor.value = "#ff0000";
  //   loginInfo.value.password = "Password error";
  //   passwordType.value = "text";
  // }
};

//让密码框显示
const openEye = () => {
  repasswordType.value = !repasswordType.value;
};
const openEyere = () => {
  repasswordTypere.value = !repasswordTypere.value;
};
const loginEye = () => {
  passwordType.value = !passwordType.value;
};
//统一回复
// const inputChange=()=>{
//   bgColor.value = "#303133";
//   passwordType.value = "password";
//   rebgColor.value='#303133'
//   repasswordType.value='password'
// }

// 用户协议&&隐私政策
const onAgreement = (type) => {
  uni.navigateTo({ url: "/pagesB/agreement/agreement?type=" + type });
};
</script>

<style lang="scss" scoped>
.login {
  // border: 1rpx solid red;
  background: linear-gradient(135deg, #306eff 0%, #5ca7ff 100%);
  border-radius: 0px 0px 0px 0px;
  // height: 100vh;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.login_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .back {
    height: 176rpx;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    width: 100%;

    .statusbar {
      height: 88rpx;
    }
    .backicon {
      height: 88rpx;
      width: 100%;
      padding: 0 18rpx;
      box-sizing: border-box;
      image {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }
  .login_logo {
    width: 260rpx;
    height: 260rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    image {
      height: 100%;
      width: 100%;
    }
  }
  .login_type {
    // border: 1rpx solid red;
    width: 100%;
    height: 106rpx;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .denglu {
      // width: 104rpx;
      height: 56rpx;
      text-align: center;
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      color: #ffffff;
    }
    .ondenglu {
      border-bottom: 4rpx solid #fff;
      font-weight: bold;
      font-size: 36rpx;
    }
    .line {
      width: 4rpx;
      height: 68rpx;
      background: #ffffff;
      border-radius: 2rpx;
      margin: 0 136rpx;
    }
    .zhuce {
      // width: 104rpx;
      height: 56rpx;
      text-align: center;
      font-size: 36rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-size: 32rpx;
      color: #ffffff;
    }
    .onzhuce {
      border-bottom: 4rpx solid #fff;
      font-weight: bold;
      font-size: 36rpx;
    }
  }
  .hasicon {
    display: flex;
    align-items: center;
    // justify-content: center;
    position: relative;
    .u_icon {
      position: absolute;
      right: 24rpx;
      top: 25rpx;
    }
  }
  .login_from {
    // border: 1rpx solid green;
    height: 200rpx;
    margin-top: 20rpx;
    width: 100%;
    padding: 0 48rpx;
    box-sizing: border-box;
    .input_css {
      height: 80rpx;
      background: rgba(228, 239, 255, 0.9);
      border-radius: 40rpx;
      margin-bottom: 32rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.38);
    }
    .onInput_css {
      background: #fed2c7;
      font-size: 32rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #e84026;
    }
    .forget_password {
      float: right;
      margin-top: -26rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }
    .input_dl {
      height: 92rpx;
      background: #ffffff;
      border-radius: 64rpx;
      opacity: 1;
      margin-top: 56rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #306eff;
    }
  }
  .agrement {
    position: fixed;
    bottom: 80rpx;
    .xie {
      height: 34rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 28rpx;
      border-bottom: 1rpx solid #fff;
    }
    .line {
      width: 2rpx;
      height: 36rpx;
      background: #ffffff;
      border-radius: 2rpx 2rpx 2rpx 2rpx;
      opacity: 1;
      margin: 0 20rpx;
    }
    .yinsi {
      height: 34rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 28rpx;
      border-bottom: 1rpx solid #fff;
    }
  }
}
</style>
